<template>
	<view class="hpv-order">
		<!-- 顶部大图 -->
		<image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" class="img" mode="aspectFill"></image>
		<!-- tab栏 -->
		<u-sticky bgColor="#fff">
			<view class="hpvAll"><u-tabs :list="HpvTabList" :scrollable="false" :itemStyle="{ width: '80px', height: '44px' }" @click="click"></u-tabs></view>
		</u-sticky>
		<!-- 下方数据栏 -->
		<view class="bottom-hpvList" v-for="(item,index) in change_List" :key="item._id">
			<view class="hpvData-item">
				<view class="hpv-type">
					{{item.name}}
				</view>
				<view class="hpv-age">
					<u-tag :text="item.describe[0]" size="mini" plain > </u-tag>
					<u-tag :text="item.describe[1]" size="mini" plain type="success" > </u-tag>
				</view>
				<view class="hpv-price">
					价格:{{item.price[0]}}-{{item.price[1]}}
				</view>
			</view>
			<view class="hpv-btn">
				<u-button shape='circle' color='#0d7cff' @click="goReserve(item)" plain text="点击预约"></u-button>
			</view>
		</view>
		<view style="height: 30rpx;">
			
		</view>
	</view>
</template>

<script>
	import {getHPVOrderApi} from '../../../utils/api.js'
export default {
	data() {
		return {
			//tab栏数据
			HpvTabList: [],
			// 疫苗数据
			HPV_list:[],
			//切换时要显示的数据
			change_List:[]
		};
	},
	methods: {
		click(item) {
			console.log('item', item);
			if(item.index==0){
				this.change_List = this.HPV_list
				console.log(this.change_List);
			}else{
				this.change_List = this.HPV_list.filter(one=>{
					return one.hpv_id === item._id
				})
				console.log(this.change_List);
			}
		},
		async getHpvList(){
			const res = await getHPVOrderApi()
			console.log(res);
			this.HpvTabList = res.data[0].hpv_select
			this.change_List = res.data[0].hpv_list
			this.HPV_list = res.data[0].hpv_list
		},
		//点击预约按钮
		goReserve(item){
			let HPVObj = JSON.stringify({id:item._id,name:item.name,price:item.price,describe:item.describe})
			uni.navigateTo({
				url:`./HPVReserve?HPV=${HPVObj}`,
				
			})
		}
	},
	mounted() {
		this.getHpvList()
	}
};
</script>

<style lang="less">
page{
  background-color: #fafafa;
}
.hpv-order {
	
	.img {
		width: 100%;
		height: 390rpx;
		vertical-align:bottom;
		
	}
	.hpvAll {
		display: flex;
		justify-content: space-around;
	}
	.bottom-hpvList{
		background-color: #ffffff;
		  margin: 20rpx;
		  padding: 20rpx;
		  display: flex;
		  justify-content: space-between;
		  border-radius: 20rpx;
		  .hpv-type{
		    font-size: 35rpx;
		  }
		  .hpv-age{
		    display: flex;
		    align-items: center;
			padding: 7rpx;
			font-size: 25rpx;
			margin: 10rpx 10rpx 10rpx 0;
		  }
		 
		  .u-transition{
			  margin-right: 20rpx;
		  }
		  .hpv-price{
		    font-weight: bold;
		    color: #ff5f2c;
		  }
		  .hpv-btn{
		    align-self: flex-end;
		  }
	}
}
</style>
